<template>
  <h1>父组件</h1>
 <son :info="info" :obj="obj" :msg="msg" @fun="fun" :foo="foo">
 <ul>
  <li>{{info}}</li>
 </ul>
 </son>
</template>

<script lang="ts">
import { defineComponent,provide,reactive,ref } from 'vue';
import Son from './components/Son.vue'

export default defineComponent({
  setup(){
const info =ref('睡觉啊');
provide('info',info)
const obj=reactive({
  name:'ysx',
  age:18,
});
function foo(){
  console.log(info)
}
const msg =ref('666666666');
function fun(value:string){
  console.log('$emit自定义事件');
  console.log(info.value+value)
}
return{
  info,
  obj,
  foo,
  msg,
  fun
};
  },
  components: {
Son,

  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
